<!DOCTYPE html>
<html lang="zn-CH">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/favicon.ico"
        type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒优购</title>
    <!-- 引入icon字体 -->
    <link rel="stylesheet" type="text/css" href="../../public/css/icon-font.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../../public/elementUI/elementUI.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../../public/css/bascis.css">
    <link rel="stylesheet" type="text/css" href="../../public/css/animate.min.css">

    <script src="../../public/js/vue-lazyload.js"></script>
    <!-- 引入组件库 -->
    <script src="../../public/elementUI/elementUI.js"></script>
    <!-- 引入axios -->
    <script src="../../public/js/axios.min.js"></script>


    <!-- 局部引入 -->
    <link rel="stylesheet" type="text/css" href="./search.css">


</head>

<body>
    <div id="app">
        <!-- header -->
        <header>
            <div class="center hd-context">
                <div v-show="isLogin">
                    <el-dropdown>
                        <div class="hd-avatar">
                            <el-avatar shape="square" :size="30" fit="fill" :src="userInfo.cusAvatar"></el-avatar>
                            <a>{{userInfo.cusNickname}}</a>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <p @click="gotoCar()">购物车</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="gotoPersional()">个人中心</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="logout()">退出</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
                <div v-show="!isLogin"><a href="../login/login.html">登录</a></div>
                <div v-show="!isLogin"><a href="../login/login.html">注册</a></div>
                <div><a href="../invitation/invitation.html" target="_blank">店铺入驻</a></div>
            </div>
        </header>
        <!-- logo 和搜索框 -->
        <div class="logo-search">
            <div class="center ls-context">
                <div class="logo">
                    <el-image style="width: 160px; height: 80px" :src="logoUrl" fit="fill"></el-image>
                </div>
                <div class="search">
                    <div class="search-box animate__animated animate__fadeInDown ">
                        <input placeholder="搜索商品" type="text" v-model="searchKey" v-on:keyup.enter="toSearch()">
                        <i class="iconfont iconsousuo" @click="toSearch()"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="mian-body center">
            <div class="top">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item><a href="../index/index.html">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="./personal.html">搜索</a></el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="content">
                <ul>
                    <li v-for="(item,index) in proList" :title="item.proTitle" @click="toProInfo(item.proId)">
                        <a>
                            <img width="185px" height="185px"
                                :src="item.proIcon">
                            <p class="pro-name">{{item.proTitle.substring(0,20)}}</p>
                            <span class="pro-peice">
                               
                                <template v-if="item.discount">
                                    <span class="old-price" ><i>￥</i>{{item.proPrice}}</span>
                                    <span class="new-price" ><i>￥</i>{{item.proPrice-item.proDis}}</span>
                                </template>
                                <template v-if="!item.discount">
                                    <span class="new-price" ><i>￥</i>{{item.proPrice}}</span>
                                </template>

                            </span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="end">
                <img src="../../public/img/end.png">
            </div>
        </div>
        <!-- foot -->
        <footer>

            <div class="center">
                <ul>
                    <li><i class="iconfont iconpinzhibaozhang"></i><span>品质保障</span></li>
                    <li><i class="iconfont icontianmaoqitiantuihuo"></i><span>七天无理由退货</span></li>
                    <li><i class="iconfont icontesefuwu"></i><span>特色服务</span></li>
                    <li><i class="iconfont iconweibiaoti-4"></i><span>急速送达</span></li>
                </ul>

            </div>
            <div class="statement">
                <div class="center">
                    <div class="left">
                        <div class="logo ">
                            <a href="../index/index.html">
                                <img width="140px"
                                    src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png">
                            </a>
                        </div>
                        <p>本网站只用作学习,演示使用,不做其他用途。</p>
                        <p>网站中的商品均为虚拟商品，不做真实出售。请勿付款!</p>
                        <p style="margin-top: 20px;">©Second you buy, powered by 苗文青 2021.</p>
                    </div>
                    <div class="right">
                        <h1>相关链接</h1>
                        <a target="_blank" href="https://www.iconfont.cn/">iconfont</a>
                        <a target="_blank" href="https://element.eleme.cn/#/zh-CN">ElementUI</a>
                        <a target="_blank" href="https://cn.vuejs.org/">Vue</a>
                        <a target="_blank" href="https://shop.vivo.com.cn/">VIVO</a>
                        <a target="_blank" href="https://animate.style/">Animate</a>
                        <a target="_blank" href="https://www.xiaomiyoupin.com/">小米有品</a>
                    </div>
                </div>


            </div>



        </footer>
        <!-- 侧边栏 -->
        <el-backtop :bottom="100">
            <div class="sidebar">
                <ul>
                    <li>
                        <el-tooltip class="item" effect="dark" content="返回顶部" placement="left">
                            <i class="iconfont iconjiantoushang1"></i>
                        </el-tooltip>
                    </li>
                </ul>
            </div>
        </el-backtop>
    </div>
</body>
<script>
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '../../public/img/error.png',
        loading: '../../public/img/loading.png',
        attempt: 1
    })
    const baseUrl = 'http://182.92,221.225:8888'
    var app = new Vue({
        el: '#app',
        data: {
            userInfo: {

            },
            logoUrl: 'https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png',
            isLogin: false,
            searchKey: '', //搜索关键字
            proList: []


        },
        
        mounted() {
            this.checkLogin();
            this.search()

        },
        methods: {



            //搜索 向后端商品
            search() {
                //解码url
                const params = decodeURI(window.location.href).split("?")[1].split("&")
                this.searchKey = params[0].split("=")[1]
                console.log(params[1].split("=")[1]);
                let type=params[1].split("=")[1]
                document.title = '与' + this.searchKey + '有关的商品'


                axios.get(baseUrl +
                        "/common/product/search?condition="+this.searchKey.trim()+"&type="+type)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.proList = response.data.data
                            console.log(this.proList);

                        } else {

                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    });



            },
            //检查登录
            checkLogin() {
                const userInfo = sessionStorage.getItem("userInfo")
                if (null === userInfo) {
                    this.isLogin = false
                } else {
                    this.isLogin = true
                    this.userInfo = JSON.parse(userInfo)
                }
            },
            gotoCar() {
                window.location.href = '../car/car.html';
            },
            //去个人中心
            gotoPersional() {
                window.location.href = '../personal/personal.html';
            },
            //退出登录
            logout() {
                sessionStorage.removeItem("userInfo")
                window.location.href = window.location.href;
            },
            //输入框回车搜索
            toSearch() {

                window.location.href = '../search/search.html?' + encodeURI('wd=' + this.searchKey+'&type=2');

            },
            //去商品详情页
            toProInfo(proId){
                var tempwindow = window.open('_blank');
                tempwindow.location = '../product/product.html?' + encodeURI('pid=' + proId);

            }

        },

    })
</script>





</html>